<script setup>
import { ref } from 'vue'
import MaterialManager from './components/MaterialManager/MaterialManager.vue'
import TimeLine from './components/TimeLine/TimeLine.vue'

const currentClip = ref(null)
</script>

<template>
  <div class="app-container">
    <!-- 左侧素材库 -->
    <aside class="left-panel">
      <MaterialManager />
    </aside>

    <!-- 中间主区域 -->
    <main class="main-content">
      <div class="preview-area">
        <h3>视频预览区</h3>
        <video v-if="currentClip" controls :src="currentClip.previewUrl" width="100%" height="400px"></video>
        <div v-else class="clip-placeholder">请选择视频片段以预览</div>
      </div>
      <div class="timeline-area">
        <TimeLine @clip-selected="currentClip = $event" />
      </div>
    </main>

    <!-- 右侧属性设置 -->
    <aside class="right-panel">
      <h3>属性设置</h3>
      <div class="property-section">
        <!-- 后续添加具体属性控制组件 -->
      </div>
    </aside>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
}
.left-panel {
  flex: 0 0 280px;
  border-right: 1px solid #e5e7eb;
  padding: 16px;
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.preview-area {
  flex: 1;
  margin-bottom: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px;
}
.timeline-area {
  flex: 0 0 350px;
}
.right-panel {
  flex: 0 0 320px;
  border-left: 1px solid #e5e7eb;
  padding: 16px;
}
</style>